import React, { Component } from 'react'
// 自己封装的fetch
import {myGet, myPost} from '../myFetch'

export default class Http extends Component {
  getData() {
    this.http.get('/api/menulist')
      .then(res => {
        console.log(res);
      })
  }
  postData() {
    this.http.post('/api/menudel', { xx: 777 })
      .then(res => {
        console.log(res);
      })
  }
  getFetch() {
    fetch('/api/menulist')
      .then(res => res.json())
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      })
  }
  postFetch() {
    // 第一个参数是url， 第二个参数是配置，包含有请求的方法。请求头、post的数据（放在body中，需要序列化）
    fetch('/api/menudel', {
      method: 'POST',
      body: { xx: 777 }
    })
      .then(res => res.json())
      .then(res => {
        console.log(res);
      }) .then(res=>{
      console.log(res);
    })
      .catch(err => {
        console.log(err);
      })
  }
  getMy() {
    myGet('/api/menulist')
    .then(res=>{
      console.log(res);
    })
  }
  postMy() {
    myPost('/api/menudel', 'xxx=555')
    .then(res=>{
      console.log(res);
    })
  }
  render() {
    return (
      <div>
        <p>发请求</p>
        <button onClick={() => this.getData()}>getData</button>
        <button onClick={() => this.postData()}>postData</button>
        <hr></hr>
        <button onClick={() => this.getFetch()}>getFetch</button>
        <button onClick={() => this.postFetch()}>postFetch</button>
        <hr></hr>
        <button onClick={() => this.getMy()}>getMy</button>
        <button onClick={() => this.postMy()}>postMy</button>
      </div>
    )
  }
}
